<template>
  <div class="TopicList">
    <van-overlay
      :show="show"
      :z-index=100
    />
    <van-loading v-if="show" color="#1989fa" size="50px"/>
    <van-nav-bar
      :title=title
      left-arrow
      @click-left="onClickLeft"
    />

    <div class="box">
      <van-list
        v-model="isUpLoading"
        :finished="upFinished"
        :immediate-check="false"
        :offset="10"
        finished-text="数据已全部加载完毕~"
        @load="onLoadList"
      >
        <ul class='recom-content' v-if="GetServerlist.length > 0" style="margin-top: 0">
          <router-link tag="li"
                       :to="'/detail/'+ item.id"
                       v-for="(item,index) in GetServerlist"
                       :key="index"
                       v-show="GetServerlist.length > 0">
            <p>
              <img v-if="item.img_path" :src="`${imgUrl}${item.img_path}`"
                   alt="" width="82" height="70">
              <img v-else :src="`${imgUrl}${collectListUrl}`" width="82" height="82" alt="">
            </p>
            <div class="">
              <p>{{item.title}}</p>
              <p>区域:{{item.areaname}}/{{item.catname}}</p>
              <!--<p>房源编号7074 信息已认证为真实房源</p>-->
              <div class="additionParams">
                <span v-if="item.info_level === 2" class="info_level">推荐</span>
                <span v-if="item.certify === 1" class="certify">认证</span>
                <span v-if="item.iftop === 2" class="iftop">置顶</span>
                <span v-if="item.ifindextop === 1" class="ifindextop">精顶</span>
              </div>
            </div>
          </router-link>
        </ul>
      </van-list>
    </div>
  </div>
</template>

<script>
  import {getStore} from "../../config/mUtils";

  export default {
    name: "TopicList",
    data() {
      return {
        title: '',
        show: true,
        imgUrl: 'http://menpuwang.com',
        pageSize: 10, // 每页条数
        pageIndex: 1, // 页码
        GetServerlist: [], // 请求数据
        isUpLoading: false, // 上拉加载
        upFinished: false, // 上拉加载完毕
        offset: 100 // 滚动条与底部距离小于 offset 时触发load事件
      }
    },
    created() {
      this.initData()
      this.title = this.$route.query.title
    },
    methods: {
      initData() {
        const _self = this
        this.$axios.post('category/TopicList', this.qs.stringify({
          type: _self.$route.query.type,
          cityid: getStore('cityid'),
          page: this.pageIndex,
          listRow: this.pageSize
        })).then((res) => {
          if (res.data.status == 1) {
            let re = res.data.data.info;
            _self.show = false

            if (re == null || re.length === 0) {
              _self.upFinished = true
              return
              //加载结束
            }

            if (re.length < this.pageSize) {
              //最后一页不足10条的情况
              _self.upFinished = true
            }

            //处理数据
            if (_self.pageIndex == 1) {
              _self.GetServerlist = re
            } else {
              _self.GetServerlist = _self.GetServerlist.concat(re)
            }
          }
        }).catch(error => {
          this.$toast('获取资源列表异常')
        }).finally(() => {
          _self.isUpLoading = false
        })
      },
      //上拉加载请求方法
      onLoadList() {
        this.pageIndex++
        this.initData()
      },
      onClickLeft() {
        this.$router.push({
          path: '/home'
        })
      },
    }
  }
</script>

<style scoped lang="scss">
  @import url("../../assets/css/lists.css");

  /deep/ .van-nav-bar {
    background-color: #c30000;

    .van-nav-bar__title {
      color: #fff;
    }

    .van-icon-arrow-left:before {
      color: #fff;
    }
  }
</style>
